<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%;"
    stripe
    :size="detailSize"
    max-height="500px"
    class="table-list table-fxied-height"
  >
    <el-table-column type="index" label="序号" width="51" align="center" />
    <el-table-column
      prop="rummager"
      label="巡检人员"
      min-width="180"
      align="center"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      prop="worker"
      label="现场人员"
      min-width="130"
      align="center"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      prop="equipment"
      label="现场设备"
      min-width="130"
      align="center"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      prop="verdict"
      label="结论"
      min-width="130"
      align="center"
      :show-overflow-tooltip="true"
    >
      <template slot-scope="{row}">
        <span v-if="row.verdict === '0'">优秀</span>
        <span v-if="row.verdict === '1'">良好</span>
        <span v-if="row.verdict === '2'">较差</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// 页面接口
import { inspectionRecord } from '@/api/projectInspection/inspectionRecord'
export default {
  name: 'PatrolRecord',
  props: {
    proId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  watch: {
    proId: {
      immediate: true,
      handler(value) {
        value && this.getList(value)
      }
    }
  },
  mounted() {
  },
  methods: {
    // 获取列表
    async getList(proId) {
      const { data: { rows }} = await inspectionRecord({ proId: proId })
      this.tableData = rows
      console.log(rows)
    }
  }
}
</script>

<style lang='scss' scoped>
.table-fxied-height {
  max-height: 396px; // 最多10条数据
  overflow-y: scroll;
}
</style>
